import { Component, OnInit, Input, Output, ViewChild, ElementRef, enableProdMode, EventEmitter } from '@angular/core';
enableProdMode()
import calcTextareaHeight from './calcTextareaHeight'
@Component({
  selector: 'el-input',
  templateUrl: './el-input.component.html',
  styleUrls: ['./el-input.component.css','./input.css']
})
export class ElInputComponent implements OnInit {


    @Input() value:string|number;
    @Input() placeholder:string;
    @Input() size:string;
    @Input() resize:string;
    @Input() readonly:boolean;
    @Input() autofocus:boolean;
    @Input() icon:string;
    @Input() disabled:boolean;
    @Input() type:string='text';
    @Input() name:string;
    @Input() autosize:any=false;
    @Input() rows:number=2;
    @Input() autoComplate:string='off';
    @Input() form:string;
    @Input() maxLength:Number;
    @Input() minLength:number;
    @Input() max:any={};
    @Input() min:any={};
    @Input() step:any={};
    @Input() validateEvent:boolean=true;
    @Input() model:number|string

    currentValue:string|number;

    @ViewChild('self') self:ElementRef;
    selfEle:HTMLElement
    @ViewChild('prepend') prepend:ElementRef;
    hasPrepend:boolean=true;
    @ViewChild('append') append:ElementRef;
    hasAppend:boolean=true;
    @ViewChild('textarea') textarea:ElementRef

    @Output() click:EventEmitter<any>=new EventEmitter<any>();
    @Output() blur:EventEmitter<any>=new EventEmitter<any>();
    @Output() focus:EventEmitter<any>=new EventEmitter<any>();
    @Output() change:EventEmitter<any>=new EventEmitter<any>();
    @Output() onIconClick:EventEmitter<any>=new EventEmitter<any>();
    @Output() valueChange:EventEmitter<string|number>=new EventEmitter<string|number>();
    @Output() modelChange:EventEmitter<string|number>=new EventEmitter<string|number>()

    iconClass:string=''

    constructor() { }

    ngOnInit() {
        this.currentValue=this.value;
        this.iconClass=this.icon?`el-icon-${this.icon}`:'';
        
    }

    ngAfterViewInit(){
        // console.log(this.prepend)
        if(this.type!=='textarea'&&this.prepend.nativeElement.children.length>0){
            this.hasPrepend=true
        }else{
            this.hasPrepend=false;
        }
        if(this.type!=='textarea'&&this.append.nativeElement.children.length>0){
            this.hasAppend=true;
        }else{
            this.hasAppend=false
        }
        this.resizeTextarea()
    }

    handleInput(e){
        const value=e.target.value;
        this.modelChange.emit(value)
        if(this.currentValue===value){return};
        this.value=value;
        this.currentValue=value;
        this.valueChange.emit(value);
        if(this.type==='textarea'){
            setTimeout(() =>{this.resizeTextarea()}, 0);
        }
    }
    handleFocus(e){
        this.focus.emit(e);
    }
    handleBlur(e){
        this.blur.emit(e)
    }
    resizeTextarea(){
        const {type,autosize} =this;
        if(!autosize||type!=='textarea'){
            return
        }
        const {minRows,maxRows}=autosize
        
        this.textarea.nativeElement.style.height=calcTextareaHeight(this.textarea.nativeElement,minRows,maxRows)

    }
   
 

}
